<template>
  <div class="FooterMusic">
     <div class="footerLeft">
<!--       <router-link :to="{path:'/itemMusic',query:{id:item.id}}">-->
       <router-link :to="{path:'/MusicDetails'}">
       <img :src="playList[playIndex].al.picUrl" alt="" /></router-link>
       <div>
         <p>{{playList[playIndex].al.name.trim()}}</p>
         <span>滑动切换歌曲</span>
       </div>
     </div>
    <div class="footerRight">
      <!-- 播放-->
      <svg v-if="!isPlayed" @click="playMusic" t="1690713665337" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1299" width="200" height="200" >
        <path d="M320 192v640l384-320-384-320z" p-id="1300"></path>
      </svg>
     <!--暂停-->
      <svg v-else t="1690715429200" @click="playMusic" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2961" width="200" height="200"><path d="M341.333333 170.666667a42.666667 42.666667 0 0 1 42.666667 42.666666v597.333334a42.666667 42.666667 0 0 1-85.333333 0V213.333333a42.666667 42.666667 0 0 1 42.666666-42.666666z m341.333334 0a42.666667 42.666667 0 0 1 42.666666 42.666666v597.333334a42.666667 42.666667 0 0 1-85.333333 0V213.333333a42.666667 42.666667 0 0 1 42.666667-42.666666z" fill="#000000" p-id="2962"></path></svg>

      <svg t="1690715388578" class="icon" viewBox="0 0 1066 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2816" width="200" height="200"><path d="M537.6 224a32 32 0 0 1 4.352 63.701333l-4.352 0.298667h-384a32 32 0 0 1-4.352-63.701333L153.6 224h384zM537.6 480a32 32 0 0 1 4.352 63.701333l-4.352 0.298667h-384a32 32 0 0 1-4.352-63.701333l4.352-0.298667h384zM537.6 736a32 32 0 0 1 4.352 63.701333l-4.352 0.298667h-384a32 32 0 0 1-4.352-63.701333l4.352-0.298667h384zM669.866667 213.333333a32 32 0 0 1 63.616-4.736l0.384 4.693334v520.064l119.594666-119.594667a32 32 0 0 1 41.984-2.858667l3.285334 2.858667a32 32 0 0 1 2.858666 41.984l-2.858666 3.285333-174.250667 174.250667a32 32 0 0 1-54.357333-18.261333L669.866667 810.666667V213.333333z" fill="#000000" p-id="2817"></path></svg>

      <svg @click="playNext" t="1690735527446" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1021" width="200" height="200"><path d="M575.712 512.1856c-0.3712 35.5648-12.9728 66.0608-38.1888 91.264-68.8832 68.8576-137.7536 137.728-206.624 206.592-36.8128 36.8064-73.6064 73.6384-110.4384 110.4256a4045.9072 4045.9072 0 0 1-29.8176 29.472c-13.0112 12.7296-33.1072 12.7168-45.7408 0.0576-12.64-12.6656-12.6912-32.768 0.192-45.7152 29.792-29.9456 59.6608-59.8208 89.6064-89.6192 74.3936-74.0288 148.8512-148 223.2704-222.0032 11.5008-11.4304 22.9056-22.9568 34.4128-34.3808 14.4064-14.3104 20.9152-31.6544 19.3472-51.7888-1.152-14.8032-6.9184-27.8976-17.4336-38.4768-33.8368-34.048-67.8336-67.9424-101.7792-101.888C343.04 316.64 293.6192 267.0912 244.032 217.7152 211.3728 185.1968 178.432 152.96 145.6704 120.5376c-9.9648-9.8624-12.8512-23.424-7.84-35.5456 8.8832-21.5232 35.9232-27.1104 52.6912-10.8288 9.1072 8.8448 18.1248 17.7792 27.104 26.752 106.528 106.496 213.0112 213.0304 319.5712 319.4944 21.3568 21.344 34.1184 46.8032 37.8496 76.768 0.3136 2.5408 0.5376 5.0944 0.6528 7.648 0.096 2.4512 0.0128 4.9088 0.0128 7.36z" p-id="1022"></path><path d="M888.3712 510.7072c-0.6208 37.0368-13.2928 67.5904-38.592 92.8768-67.072 67.0272-134.1184 134.0864-201.1776 201.1392-38.3168 38.3168-76.6208 76.6464-114.9504 114.944-10.112 10.0992-20.288 20.1344-30.4896 30.1504-13.024 12.7936-33.0496 12.9088-45.7408 0.3328-12.8-12.6912-12.864-32.8896 0.128-45.9392 29.952-30.0864 59.968-60.1088 90.0544-90.0608 85.856-85.4848 171.776-170.912 257.6384-256.3904 14.3104-14.2464 20.4992-31.6672 18.8352-51.648-1.2096-14.5536-6.8864-27.4816-17.2352-37.9008-34.2016-34.432-68.5696-68.6976-102.8864-103.0208-49.1008-49.1008-98.1376-98.272-147.3408-147.264-32.7168-32.576-65.7152-64.8704-98.528-97.344-9.984-9.8752-12.8896-23.4048-7.9104-35.5328 8.8384-21.536 35.904-27.1872 52.6656-10.9248 9.3376 9.0624 18.5792 18.2272 27.7824 27.424 106.2144 106.1824 212.3776 212.416 318.6368 318.5472 21.44 21.4144 34.3936 46.88 38.112 76.9664 0.608 4.96 0.736 9.984 0.9984 13.6448z" p-id="1023"></path></svg>
    </div>
    <audio :src="this.muiscUrl" ref="audio"></audio>
  </div>
</template>

<script>
import {mapMutations, mapState} from "vuex";
import service from "@/components/request/request";
import musicList from "@/components/home/MusicList.vue";
import MusicDetails from "@/components/details/MusicDetails.vue";

export default {
  name: "FooterMusic",
  components: {
    MusicDetails

  },
  data(){
    return{
      paused:false,
      muiscUrl: "",
      toPlay:"",
      show:false
    }
  },
  computed:{

    musicList() {
      return musicList
    },
    //辅助函数结构
    ...mapState(["playList","playIndex","isPlayed","detailShow"])
  },
  mounted() {
    console.log(this.playList);
    this.fetchMusic()
  },
  methods:{
    popUp(){
      this.show=true
    },
    playMusic(){
      const audio=this.$refs.audio
      if (audio.paused){
        this.$refs.audio.play()
        this.UPDATE(true);
      }else {
        audio.pause()
        this.UPDATE(false)
      }
      //自动播放下一首
      if (audio.ended){
        this.playNext()
      }
    },
    playNext(){
      if (this.playList.length<=1||this.playList.length>20){
        console.log("没有下一首啦")
        return
      }
      var index = this.playIndex;
        index+=1;
        this.UPDATE(false)
        this.INDEX(index)
        this.fetchMusic()
        this.playMusic()
    },
    async fetchMusic(){
      const index=this.playIndex;
      if (index>=this.playList.length){
        this.muiscUrl='http://m8.music.126.net/20230803190526/c17a448fd1172a64efae2085aa806a65/ymusic/79d5/2b65/f9e3/f720a4ee7d293c3ec198f3c407ec6a83.mp3';
      }
      else {
        const res=await service.get(`/song/url?id=${this.playList[index].id}`);
        this.muiscUrl = res.data.data[0].url;
      }
    },
    ...mapMutations(["UPDATE","INDEX","LIST","SHOW"]),
  },
  watch:{
    //监听,同时需要更改播放列表
     playIndex:  function (){
       this.fetchMusic()
       this.$refs.audio.autoplay=true;
     },
    playList:function (){
       this.fetchMusic();
      this.$refs.audio.autoplay=true;
    }
  }
}
</script>

<style lang="less" scoped>
   .FooterMusic{
     width: 100%;
     height: 70px;
     background-color: #fff;
     position: fixed;
     bottom: 0;
     border-top: 1px solid gray;
     display: flex;
     padding: 0.2rem;
     font-size: 15px;
     justify-content: space-between;//两端对齐
     .footerLeft{
       width: 60%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: space-around;
       img{
         width: 1rem;
         height: 1rem;
         border-radius: 50%;
       }
     }
     .footerRight{
       width: 20%;
       height: 100%;
       display: flex;
       justify-content: space-between;
       align-items: center;
       .icon{
         width: 30px;
         height: 30px;
       }
     }
   }
</style>
